<template>
  <div id="right-middle-pie">
    <div class="right-middle-pie-header">年龄分布</div>
    <div id="right-middle-pie-chart"></div>
  </div>
</template>

<script>
var data = [
  {
    value: 100,
    name: '45-50岁',
    label: {}
  },
  {
    value: 80,
    name: '40-45岁',
    label: {}
  },
  {
    value: 65,
    name: '30-40岁',
    label: {}
  },
  {
    value: 65,
    name: '30岁以下',
    label: {}
  },
  {
    value: 60,
    name: '55岁以上',
    label: {}
  }]
var colors = ['#1a99d5', '#06bb71', '#e4a3ff', '#ff9e9f', '#ffef63']
export default {
  name: 'RightMiddlePie',
  data () {
    return {
      option: {
        grid: {},
        polar: {},
        angleAxis: {
          show: false,
          interval: 1,
          type: 'category',
          data: []
        },
        // 中间画圈圈的坐标轴
        radiusAxis: {
          show: false
        },
        series: [{
          type: 'pie',
          radius: ['70%', '100%'],
          color: colors,
          hoverAnimation: false,
          itemStyle: {
            color: 'transparent'
          },
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 55
            }
          },
          label: {
            fontSize: 16,
            position: 'inside',
            align: 'right'
          },
          name: '',
          data: this.getOutPieData()
        }, {
          type: 'pie',
          color: colors,
          radius: ['75%', '42%'],
          roseType: 'area',
          zlevel: 10,
          label: {
            show: true,
            fontSize: 16,
            textStyle: {
              color: '#fff'
            },
            position: 'inside',
            rotate: 30,
            align: 'right',
            formatter: '{d}%'
          },
          animation: false,
          data: this.getPieData()
        }]
      }
    }
  },
  methods: {
    // 有值的色图的正切处理
    getPieData () {
      const { angleText } = this
      var data3 = JSON.parse(JSON.stringify(data))
      for (let i = 0; i < data3.length; i++) {
        data3[i]['label']['color'] = '#fff'
        // data3[i]['itemStyle']['color'] = '#4169E1'
        // data3[i]['emphasis']['itemStyle']['color'] = '#6A5ACD'
        data3[i]['label']['rotate'] = angleText(i, data3.length)
      }
      return data3
    },
    // 最外层大圈的数据
    getOutPieData () {
      const { angleText } = this
      let _data = JSON.parse(JSON.stringify(data))
      for (let i = 0; i < _data.length; i++) {
        _data[i].value = 1
        _data[i]['label']['rotate'] = angleText(i, _data.length)
      }
      return _data
    },
    angleText (i, num) {
    // 每个元素的角度
      let everyAngle = 360 / num
      // 文字现在所在的角度
      let currentAngle = i * everyAngle + everyAngle / 2
      if (currentAngle <= 90) {
        return -currentAngle
      } else if (currentAngle <= 180 && currentAngle > 90) {
        return 180 - currentAngle
      } else if (currentAngle < 270 && currentAngle > 180) {
        return 180 - currentAngle
      } else if (currentAngle < 360 && currentAngle >= 270) {
        return 360 - currentAngle
      }
    }
  },
  created () {
  },
  mounted () {
    let chart = this.$echarts.init(document.getElementById('right-middle-pie-chart'))
    chart.setOption(this.option)
  }
}
</script>

<style lang="less" scoped>
  #right-middle-pie {
    width: 100%;
    height: 100%;

    .right-middle-pie-header {
      font-size: 18px;
      font-weight: 550;
      width: 100%;
      text-align: center;
      margin: 10px 0 10px 0;
    }

    #right-middle-pie-chart {
      height: calc(~"100% - 50px");
    }
  }
</style>
